<template>
    <div class="createPost-container">
        <el-form ref="downloadForm" :model="downloadForm" :rules="rules" class="form-container">
            <div class="createPost-main-container">

                <el-form-item label="资源名称" label-width="80px" prop="name">
                    <el-input v-model="downloadForm.name"></el-input>
                </el-form-item>

                <el-form-item label="资源文件" label-width="80px">
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        action="http://1.116.146.81:9090/api/v1/multipartFile/upload"
                        :limit="uploadLimit"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="downloadForm.fileList"
                        :data="downloadForm"
                        :on-success="uploadSuccess"
                        :before-upload="beforeUpload"
                        :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <span slot="tip" class="el-upload__tip">建议只上传压缩包</span>
                    </el-upload>
                </el-form-item>

                <el-form-item>
                    <el-button style="margin-left: 80px;" size="small" type="success" @click="submitUpload">上传资源</el-button>
                    <el-button @click="resetForm('downloadForm')">重置</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
import Upload from "@/components/Upload/SingleImage";

export default {
    data(){
        return {
            loading: false,
            formValid: true,
            uploadLimit:1,
            downloadForm:{
                name: '',
                fileList: []
            },
            rules: {
                name: [{required: true, message: "请输入资源名称", trigger: "blur"}],
                // fileList: [{required: true, message: "请选择资源", trigger: "change"}]
            }
        }
    },
    components: { Upload },
    created(){

    },
    methods: {
        // 提交数据
        submitUpload() {
            let _this = this;
            this.$refs['downloadForm'].validate(async valid => {
                if (!valid) {
                    _this.formValid = false;
                }
                else
                {
                    _this.formValid = true;
                }
            });

            if (this.formValid == false)
            {
                return false;
            }

            this.$refs.upload.submit();
        },
        // 判断有没有选择文件
        beforeUpload(file){
            // console.log(file);
        },
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        handlePreview(file) {
            // console.log(file);
        },
        uploadSuccess(response, file, fileList){
            if (response.success == true)
            {
                this.$notify({
                  title: '成功',
                  message: '上传资源成功',
                  type: 'success',
                  duration: 2000
                });
                this.$router.go(-1);
            }
            else
            {
                this.$notify({
                  title: '失败',
                  message: '上传资源失败',
                  type: 'error',
                  duration: 2000
                })
            }
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}

.el-upload__tip{
    font-size:14px;
    padding-left:20px;
}
</style>